<template>
    <div>
        <flexbox justify="flex-end" class="btn-group header-btn" v-if="!disabled">
            <a-button type="primary" @click="handleSave(9)">保存</a-button>
        </flexbox>
        <h-section title="研发流程信息" collapse>
            <flexbox class="cell-item">
                <div class="cell-item-label">当前阶段：</div>
                <div class="font-w-b">{{ stage }}</div>
            </flexbox>
            <div class="cell-item">
                <div class="caption-font-color" style="line-height: 24px">提示：请在此步骤上传交付相关文档，完成上线后结束流程</div>
            </div>
            <a-divider />
            <a-form layout="inline" :model="form">
                <a-row>
                    <a-col :span="16">
                        <a-form-item label="验收交付" :span="24">
                            <file-cell :fileList="form.files" v-if="disabled" />
                            <upload-cell :fileParams="{ connectType: '验收交付', type: 1 }" :fileList="form.files" @valueChange="fileChange" v-else />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <slot name="processHistoryRecord" />
        </h-section>
        <h-section title="测试流程" collapse v-if="detail.pmpTestInformationDTO">
            <a-form layout="inline">
                <a-row>
                    <a-col :span="16">
                        <a-form-item label="提测需求名称" :span="24">
                            <span>{{ detail.versionName }}</span>
                        </a-form-item>
                        <a-form-item label="测试系统" :span="24">
                            <span>{{ detail.pmpTestInformationDTO.testSystem }}</span>
                        </a-form-item>
                        <a-form-item label="测试时间" :span="24">
                            <span>{{ detail.pmpTestInformationDTO.testStartTime }}</span>
                        </a-form-item>
                        <a-form-item label="测试方式" :span="24">
                            <span>自动提测</span>
                        </a-form-item>
                        <a-form-item label="测试类型" :span="24">
                            <span>{{ detail.pmpTestInformationDTO.testType }}</span>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <slot name="testHistoryRecord" />
        </h-section>
    </div>
</template>

<script lang="ts">
import { FileCell, UploadCell } from '@/components';
import { defineComponent, ref, unref, computed } from 'vue';
export default defineComponent({
    name: 'RequireOnline',
    components: {
        FileCell,
        UploadCell
    },
    props: {
        detail: { type: Object, default: () => ({}) },
        stage: { type: String, default: '' },
        disabled: { type: Boolean, default: false },
        stepStatus: {
            type: String,
            default: ''
        },
        hasAuth: {
            type: Boolean,
            default: false
        }
    },
    emits: ['save'],
    setup(props, { emit }) {
        const form = ref<Recordable>({
            files: []
        });
        const handleSave = (type: number) => {
            emit('save', {
                type,
                query: {
                    ...unref(form)
                }
            });
        };
        // 监听文件删除等操作
        const fileChange = (fileList: any[]) => {
            form.value.files = [...fileList];
        };
        const init = () => {
            Object.keys(unref(form)).forEach((key) => {
                if (key === 'files') {
                    if (props.detail.files && props.detail.files.length) {
                        form.value.files = props.detail.files.filter((item) => item.connectType === '验收交付');
                    }
                } else {
                    form.value[key] = props.detail[key];
                }
            });
        };
        init();
        return {
            form,
            handleSave,
            fileChange
        };
    }
});
</script>

<style scoped lang="less">
@import './styles/index.less';
</style>